<template>
  <!-- <a-config-provider prefixCls="cns"> -->
    <div>
      <section id="cns-main-app">
      <section class="cns-menu-wrapper">
        <main-menu :menus="menus" />
      </section>
      <section class="cns-frame-wrapper">
        <router-view v-show="$route.name" />
        <section v-show="!$route.name" id="frame"></section>
      </section>
    </section>
    <section id="cns-main-app" style="position: absolute; right: 0; top: 0;">
      <a-button type="primary" @click="loginSass">登录机构</a-button>
      <a-button type="danger" @click="login">登录平台</a-button>
    </section>
    </div>
  <!-- </a-config-provider> -->
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MainMenu from "@/components/menu/index.vue";
import actions from "@/shared/actions";

const menuSass = [
  {
    key: "SassMicroApp",
    title: "机构主页",
    path: "/sass",
  },
  {
    key: "SassMicroAppList",
    title: "机构列表",
    path: "/sass/list",
  },
  {
    key: "SassMicroAppCom",
    title: "机构信息",
    path: "/sass/communication",
  },
]

const menu = [
  {
      key: "PlatformtMicroApp",
      title: "平台管理-主页",
      path: "/platform",
    },
    {
      key: "PlatformMicroAppList",
      title: "平台管理-列表",
      path: "/platform/list",
    },
]

const menu2 = [
  {
      key: "PlatformtMicroApp",
      title: "sass化管理-主页",
      path: "/platform/sass",
    },
    {
      key: "PlatformMicroAppList",
      title: "sass化管理-列表",
      path: "/platform/sass/list",
    },
]

const menu3 = [
  {
      key: "PlatformtMicroApp",
      title: "超管权限-主页",
      path: "/platform/auth",
    },
    {
      key: "PlatformMicroAppList",
      title: "超管权限-列表",
      path: "/platform/auth/list",
    },
]

export default {
  name: 'App',

  components: {
    MainMenu
  },

  data() {
    return {
      menus: [],
      isLogin: false,
    }
  },
  methods: {
    loginSass(){
      this.isLogin = true;
      this.menus = menuSass;
      actions.setGlobalState({ loginType: 'sass' })
      this.$router.push('/sass')
    },
    login(){
      this.isLogin = true;
      // 默认打开为 sass 平台tab
      this.menus = menu;
      actions.setGlobalState({ loginType: 'platform' })
      this.$router.push('/platform')
    }
  },
  created() {
    console.log("主应用 created", this);
  },
  mounted() {
    actions.onGlobalStateChange((state, prevState) => {
      console.log("state 变更", state);
      if (state.platformTab != prevState.platformTab) {
        switch(state.platformTab) {
          case 'platform': {
            this.$router.push('/platform')
            this.menus = menu; break;
          }
          case 'sass': {
            this.$router.push('/platform/sass')
            this.menus = menu2; break;
          }
          case 'auth': {
            this.$router.push('/platform/auth')
            this.menus = menu3; break;
          }
        }
      } 
      console.log("主应用观察者：loginType 改变前的值为 ", prevState.loginType);
      console.log("主应用观察者：登录状态发生改变，改变后的 loginType 的值为 ", state.loginType);
    })
  }
}

</script>

<style lang="less" scoped>
#cns-main-app {
  height: 100%;
  position: relative;
  .cns-menu-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    width: 172px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .cns-nav-wrapper {
    position: fixed;
    width: 100%;
    min-width: 1060px;
    padding-left: 172px;
    left: 0;
    top: 0;
    z-index: 30;
  }
}
.cns-frame-wrapper {
  padding-left: 172px;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  position: relative;
}
#cns-frame {
  width: 100%;
  height: 100%;
  > :first-child {
    height: 100%;
  }
}
</style>
